<template>
	<view class="base">
		<view class="exit">
			<!-- <button style="margin-left: 10px;">返回</button> -->
		</view>
		<picker mode="selector" :range="options" :value="defaultIndex" @change="selectChange" class="picker">
			<view class="text">当前词汇表：{{ options[defaultIndex] }}</view>
		</picker>
		<view class="eng">
			{{practice!.word.eng}}
			<span class="iconfont icon-laba  laba" @click="play"></span>
		</view>
		<view class='chiContainer'>
			<view class='chi' :style="{display:show}">
				{{practice!.word.chi}}
			</view>
		</view>

		<view class='buttons'>
			<view class='button' @click="yes"><span class='iconfont icon-tongguo'></span>认识</view>
			<view class='button' @click="no"> <span class='iconfont icon-shibai'></span>不认识</view>
			<view class='button' @click="next"><span class='iconfont icon-qiehuan'></span>下一个</view>
		</view>
		<view class="sum">
			{{len}}
		</view>
		<!-- <view class='sum'>{{len}}</view> -->
	</view>
</template>

<script setup lang="ts">
	//导入模块
	import { ref, watch } from 'vue';
	import { TheWord, practice } from '../../type/index'
	import { getOption, GetList, getRandomWord, InitPractice } from '../../api/api'

	// 定义变量
	// 选项
	const options = ref([])
	// 选项索引
	const defaultIndex = ref(0)
	// 中文和英文的hook
	// const [practice, setPractice] = useState<practice>({ word: { eng: 'word', chi: '中文' }, score: 5 })
	const practice = ref<practice>({ word: { eng: 'word', chi: '中文' }, score: 5 })
	// 单词组变量
	const list = ref<practice[]>([])
	// 样式控制
	const show = ref<'none' | 'flex'>('none')
	// 单词数量
	const len = ref(0)
	// 音频链接
	const src = ref('')
	// 定义函数
	// 选择select事件
	function selectChange(e : any) {
		defaultIndex.value = e.detail.value
	}
	// 播放音频事件
	const play = () => {
		src.value = "http://dict.youdao.com/dictvoice?audio=" + practice.value.word.eng + "&type=2"
		let audio = document.querySelector('audio') as HTMLAudioElement;
		audio = new Audio(src.value)
		audio.play();
	}
	// 获取单词列表
	function getList(index : number) {
		GetList(options.value[index]).then((response => {
			// console.log(response)
			const tmp : TheWord[] = response
			list.value = InitPractice(tmp)
			practice.value = getRandomWord(list.value)
		}))
			.catch(err => {
				console.log('错误错误错误错误错误错误')
			})
	}

	//  认识按钮的事件
	async function yes() {
		show.value = 'flex'
		await new Promise(resolve => setTimeout(resolve, 1000));
		const copy : practice[] = list.value
		for (let i = 0; i < list.value.length; i++) {
			if (copy[i] == practice.value) {
				copy[i].score--
			}
			if (copy[i].score == 0) {
				copy.splice(i, 1)
			}
		}
		list.value = copy
		len.value = list.value.length
		show.value = 'none'
		if (list.value.length != 0) {
			practice.value = getRandomWord(list.value)
		} else {
			practice.value = { word: { eng: "英文", chi: "中文" }, score: 0 } as practice
		}
	}
	// 不认识的事件
	function no() {
		const copy : practice[] = list.value
		for (let i = 0; i < copy.length; i++) {
			if (copy[i] == practice.value) {
				copy[i].score++
			}
		}
		list.value = copy
		show.value = 'flex'
	}
	function next() {
		if (list.value.length != 0) {
			show.value = 'none'
			practice.value = getRandomWord(list.value)
		}
	}

	// 执行函数
	getOption().then(response => {

		options.value = response
	})

	// 监听部分
	watch(defaultIndex, (newValue, oldValue) => {
		getList(newValue)
	})

	watch(practice, (newValue, oldValue) => {
		play()
	})
</script>

<style scoped>
	@import url('../../static/iconfont/iconfont.css');

	.picker {
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
		width: 47vw;
		display: flex;
		justify-content: center;
		height: 4vh;
		align-items: center;
		background-color: white;
		border-radius: 20px;
	}

	.base {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
	}

	.exit {
		margin-bottom: 5vh;
		margin-top: 5vh;
		width: 100vw;
	}

	.select {
		width: 50vw;
		margin-top: 10px;
	}

	.eng {
		font-size: 5.5vw;
		margin-top: 4vw;
		margin-bottom: 3vh;
		height: 5vh;
	}

	.chiContainer {
		height: 3vh;
		width: 100vw;
		display: flex;
		justify-content: center;
	}

	.chi {
		font-size: 14px;
		margin-top: 2vw;
		margin-bottom: 5vw;
	}

	.laba {
		font-size: 6vw;
		margin-top: 1vw;
		margin-bottom: 1vw;
		margin-left: 1vw;
		cursor: pointer;


	}

	.button {
		width: 10vw;
		height: 2.5vw;
		margin-top: 9vh;
		display: flex;
		align-items: center;
		border-radius: 0.4vw;
		justify-content: center;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
		cursor: pointer;
		user-select: none;
		border-radius: 10px;
		background-color: #fff;

	}

	.buttons {
		display: flex;
		justify-content: center;
		gap: 1.5vw;
		margin-top: 10vh
	}

	.exit {
		width: 20vw;
		margin-right: auto;
	}

	.button:hover {
		background-color: #e1dddd;
	}

	.sum {
		margin-top: 2vw;
		font-size: 2vw;
	}

	@media (max-width: 897px) {
		.base {
			width: 100vw;
			height: 100vh;
		}

		.eng {
			font-size: 10vw;
			margin-top: 12vh;
		}

		.chi {
			font-size: 5vw;
			margin-top: 5vh;
		}

		.button {
			width: 20vw;
			height: 7vw;

		}

		.sum {
			font-size: 5vw;
			margin-top: 2vh;
		}
	}
</style>